<template>
	<view>
		<view class="topDetail">
			<view class="l">
				<image src="../static/warn-AI.png" mode=""></image>
				<view class="text">
				</view>
				<view class="button" style="border: none;">
				</view>
			</view>

		</view>
		<view class="two-box">
			<view class="boxList">
				<view class="item_box">
					<view class="l1">
						类别:
					</view>
					<view class="r1 g">
						{{details.type?details.type:'=='}}
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						状态:
					</view>
					<view class="r1">
						<text>{{onlineCode==0?'在线':'离线'}}</text>
						<view class="status" :style="{background:onlineCode==1?'#A0A0A0':'#00FF00'}">

						</view>
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						SN:
					</view>
					<view class="r1" @click="copy(details.sn)">
						<text>默认隐藏</text>
						<image src="/static/copy.png" mode=""></image>
					</view>
				</view>
				<view class="item_box">
					<view class="l1">
						备注:
					</view>
					<view class="r1" @click="editDesc(details.sn)">
						<text>默认隐藏</text>
						<image src="/static/edit.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="content">

			<view style="height: 100rpx;">

			</view>
			<view class="equipment_top">
				<view :class="day==0?'equipment_b active':'equipment_b'" @click="clickTab(0)">
					今天
				</view>
				<view :class="day==1?'equipment_b active':'equipment_b'" @click="clickTab(1)">
					昨天
				</view>
			</view>
			<!-- 			<view class="line1_text">
				<view class="l">
					上行 <text>{{details.up_flow}}</text>Mbps
				</view>
				<view class="r">
					下行 <text>{{details.down_flow}}</text> Mbpsd
				</view>
			</view> -->
			<view style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:80rpx;border-radius: 20rpx;">

				<view class="charts-box1">
					<view class="bottom_box" style="justify-content: space-between;padding: 0 20rpx;">
						<view class="">
							<view style="color: #D50C0C;">
								累计收益{{details.money}}
							</view>
							<view style="color: #D9D9D9;margin: 0;">
								在线天数{{details.day}}
							</view>
						</view>
						<view class="" style="position: relative;">
							<view class="t" v-if="chartsDataLine1.date.length>0" @click="showDetails">
								网络详情
							</view>
							<view class="wlBox" v-if="showD">
								<view class="text">
									网络方式:{{network.netType}}
								</view>
								<view class="text">
									内网 IP:{{network.localIp}}
								</view>
								<view class="text">
									外网 IP:{{network.publicIp}}
								</view>
								<view class="text">
									MAC 地址:{{network.mac}}
								</view>
								<view class="text">
									NAT 类型:{{network.nat}}
								</view>
								<view class="text">
									uPnP:{{network.upnpIp}}
								</view>
								<view class="text">
									Ipv6 地址:{{network.ipv6}}
								</view>
								<view class="text">
									丢包率:{{network.pingLoss}}
								</view>
								<view class="text">
									延迟率:{{network.pingRtt}}
								</view>
								<view class="text">
									带宽:{{network. upload}}
								</view>
							</view>
						</view>
					</view>
					<view class="noneLine" v-if="chartsDataLine1.date.length==0">
						<view class="">
							<image src="/static/noneLine.png" mode="heightFix"></image>
						</view>
					</view>
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" v-else />

				</view>

				<!-- 		<view class="bo">
				
				</view> -->
			</view>
			<view
				style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;">

				<view class="line_title">
					CPU 利用率
				</view>
				<view class="line2_text">
					<view class="l">
						单位：%
					</view>
					<view class="r">
						CPU：{{details.cpu_core}}核
					</view>
				</view>
				<view class="charts-box1">
					<view class="noneLine" v-if="chartsDataLine2.date.length==0">
						<image src="/static/noneLine.png" mode="heightFix"></image>
					</view>
					<qiun-data-charts v-else type="area" :opts="{...opts,color:['#FC8452']}" :chartData="chartData1" />
				</view>
			</view>
			<view
				style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;">
				<view class="line_title">
					<text>内存 利用率</text>
					<text></text>
				</view>
				<view class="line2_text">
					<view class="l">
						单位：%
					</view>
					<view class="r">
						内存：{{details.mem_total}}G
					</view>
				</view>
				<view class="charts-box1">
					<view class="noneLine" v-if="chartsDataLine3.date.length==0">
						<image src="/static/noneLine.png" mode="heightFix"></image>
					</view>
					<qiun-data-charts v-else type="area" :opts="{...opts,color:['#9A60B4']}" :chartData="chartData2" />
				</view>
			</view>
			<u-collapse>
				<u-collapse-item title="磁盘信息">
					<view class="u-collapse-content">
						<view class="charts-box1" v-if="chartsDataLine3.date.length==0">
							<view class="noneLine">
								<image src="/static/noneLine.png" mode="heightFix"></image>
							</view>
						</view>
						<view
							style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;"
							v-for="(item,index) in chartsDataLine4" :key="index" v-else>
							<view class="line_title" style="float: left">
								<text>磁盘信息</text>
								<text></text>
							</view>
							<view class="line2_text">
								<view class="l">
								</view>
								<view class="r">
									<view class="t" v-if="item.info">
										硬盘总量:{{item.info.total}}G
									</view>
									<view class="" v-if="item.info">
										<text style="margin-right: 10px;color:#5ccaa5 ;"
											@click="showInfo(index)">{{item.info.isCache*1?'加速盘':'磁盘'}}{{index+1}}</text>
										容量：{{$fun.subtraction(item.info.total,item.info.used)}}G
									</view>
								</view>
							</view>
							<view class="charts-box1" v-if="item.info" style="position: relative;">
								<view class="wlBox" style="top: 0;" v-if="item.info.is_show">
									<view class="text">
										名称:{{item.info.name}}
									</view>
									<view class="text">
										类型:{{item.info.type}}
									</view>
									<view class="text">
										温度:{{item.info.temperature}}
									</view>
									<view class="text">
										已使用:{{item.info.used}}
									</view>
									<view class="text">
										读/写延迟:{{item.info.wawait}}
									</view>
									<view class="text">
										IOPS:{{item.info.ops}}
									</view>
								</view>
								<view class="noneLine" v-if="item.date.length==0">
									<image src="/static/noneLine.png" mode="heightFix"></image>
								</view>
								<qiun-data-charts v-else type="area" :opts="opts" :chartData="chartData3" />
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>

			<view
				style="background: #FFFFFF;padding-top: 30rpx;padding-bottom:10rpx;border-radius: 20rpx;margin-top: 30rpx;">
				<view class="line2_text" style="margin-bottom: 10px;">
					<view class="l" style="color:#000000">
						系统盘
					</view>
					<view class="r" style="color:#000000">
						<!-- 	<view class="t" v-if="details">
							硬盘总量:{{details.disk_total}}G/{{details.disk_used}}G
						</view> -->
					</view>
				</view>
				<view>
					<view style="height:  750rpx;" class="charts-box1">
						<view class="noneLine" v-if="chartsDataLine3.date.length==0">
							<image src="/static/noneLine.png" mode="heightFix"></image>
						</view>
						<qiun-data-charts v-else type="ring" :opts="opts1" :chartData="chartData4" />
					</view>
				</view>
			</view>
			<view class="equipment_top">
				<view :class="'equipment_b active'" style="background: 2a80f7;width: 222rpx;" @click="deviceOperate(1)">
					重启
				</view>
				<view :class="'equipment_b active'" style="background: #0ECD40;width: 222rpx;"
					@click="deviceOperate(2)">
					关机
				</view>
				<view :class="'equipment_b'" style="background: #DBDBDB;color: #666666;width: 222rpx;"
					@click="removeEquuipment()">
					移除设备
				</view>
			</view>
		</view>
		<z-modal ref="zModel" :show="modalControl" :btnGroup="btnGroup" :contentType="2" :titleText="'修改备注'"
			@cancle="cancle" @sure="sure"></z-modal>

		<view class="tools" @tap="$fun.jump(`/pageC/warn/warn?sn=${sn}`)">
			<image style="width: 100rpx;height: 100rpx" src="../static/warn-AI.png" mode="heightFix"></image>
			</u-icon>
		</view>
	</view>
</template>

<script>
	// import F2 from '@antv/f2/dist/f2';
	// import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import zModal from '@/components/z-modal/z-modal.vue'
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	import aiProgress from '@/components/ai-progress/ai-progress'

	export default {
		components: {
			aiProgress,
			// echarts
		},
		data() {
			return {
				chartData: {},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15], // 图位置
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						labelCount: 5, //设置显示个数
						format: 'formatterTime'
					},
					dataLabel: false, // 数据显示
					legend: false,
					dataPointShape: false, // 圆点显示
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "硬盘总量",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: 100,
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				day: 0,
				chartsDataLine1: {
					date: []
				},
				chartsDataLine2: {
					date: []
				},
				chartsDataLine3: {
					date: []
				},
				chartsDataLine4: {
					date: []
				},
				btnGroup: [{
						text: '取消',
						color: '#FFFFFF',
						bgColor: '#999999',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'cancle'
					},
					{
						text: '确定',
						color: '#FFFFFF',
						bgColor: '#007AFF',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'sure'
					}
				],
				modalControl: false,
				details: {},
				sn: null,
				onlineCode: 1,
				network: {},
				diskInfo: {},
				showD: false,
				showD1: false,
				option: {}
			};
		},
		watch: {
			chartsDataLine1() {

			},
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.sn = option.name
			this.onlineCode = option.onlineCode
			this.getListLine()
		},

		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: this.chartsDataLine1.date,
					series: [{
							name: "上行",
							data: this.chartsDataLine1.up
						},
						{
							name: "下行",
							data: this.chartsDataLine1.down
						},
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
				let res1 = {
					categories: this.chartsDataLine2.date,
					series: [{
						name: "cpu利用率",
						data: this.chartsDataLine2.flow
					}, ]
				}
				this.chartData1 = JSON.parse(JSON.stringify(res1));
				let res2 = {
					categories: this.chartsDataLine3.date,
					series: [{
						name: "内存利用率",
						data: this.chartsDataLine3.flow
					}, ]
				}
				this.chartData2 = JSON.parse(JSON.stringify(res2));
				let res3 = {
					categories: this.chartsDataLine4[0].date,
					series: [{
							name: "负载率",
							data: this.chartsDataLine4[0].ioutil
						},
						{
							name: "磁盘延迟",
							data: this.chartsDataLine4[0].wawait
						},
					]
				};
				this.chartData3 = JSON.parse(JSON.stringify(res3));
				let res4 = {
					series: [{
						data: [{
							"name": "使用",
							"value": +this.details.disk_used
						}, {
							"name": "剩余",
							"value": +this.details.disk_total - +this.details.disk_used
						}]
					}]
				};
				this.chartData4 = JSON.parse(JSON.stringify(res4));
			},
			showInfo(index) {
				for (var i = 0; i < this.chartsDataLine4.length; i++) {
					if (index == i) {
						this.chartsDataLine4[i].info.is_show = !this.chartsDataLine4[i].info.is_show
					} else {
						this.chartsDataLine4[i].info.is_show = false
					}
				}
			},
			deviceOperate(operateType) {
				uni.showModal({
					content: '确定要关机或者重启设备吗?',
					success: (e) => {
						if (e.confirm) {
							this.$fun.ajax.post('/butt/deviceOperate', {
								sn: this.sn,
								operateType
							}).then(res => {
								if (res.code == 1) {
									this.$fun.msg(res.msg)
								}
							})
						}
					}
				});

			},
			editDesc() {
				this.modalControl = true
				this.$refs.zModel.inputText = this.details.desc
			},
			sure(e) {
				if (e.inputText == '') {
					this.$fun.msg('请输入备注')
					return;
				}
				this.$fun.ajax.post('butt/updateBind', {
					desc: e.inputText,
					sn: this.sn
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg);
						this.modalControl = false
						setTimeout(() => {
							this.getListLine()
						}, 500)
					}
				})
			},
			cancle() {
				this.modalControl = false
			},
			getListLine() {
				this.$fun.ajax.post('/butt/info', {
					sn: this.sn,
					day: this.day
				}).then(res => {
					if (res.code == 1) {
						this.chartsDataLine1 = res.data.kline
						this.chartsDataLine2 = res.data.cpu
						this.chartsDataLine3 = res.data.memory
						this.chartsDataLine4 = res.data.disk
						this.details = res.data.info
						this.diskInfo = res.data.diskInfo
						this.network = res.data.network
						this.opts1.subtitle.name = this.details.disk_total
						this.getServerData();
						return res.data.kline
					}
				})
			},
			clickTab(day) {
				if (day == this.day) {
					return
				}
				this.day = day
				this.getListLine()
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			removeEquuipment() {
				uni.showModal({
					content: '确定要移除设备吗?',
					success: (e) => {
						if (e.confirm) {
							this.$fun.ajax.post('/butt/removeBind', {
								sn: this.sn
							}).then(res => {
								if (res.code == 1) {
									this.$fun.msg(res.msg)
									this.$fun.jump('', 4, 1200)
								}
							})
						}
					}
				});
			},
			showDetails() {
				this.showD = !this.showD
			}
		},

	}
</script>

<style lang="scss">
	.topDetail {
		width: 100%;
		background: #2a80f7;
		display: flex;
		padding: 30rpx;
		padding-bottom: 60rpx;

		.l {
			width: 100%;
			text-align: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.text {
				color: rgb(81, 214, 206);
				font-size: 26rpx;
			}

			.button {
				margin-top: 20rpx;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				color: rgb(81, 214, 206);
				border: 2rpx solid rgb(81, 214, 206);
			}
		}

		.r {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;


		}
	}

	.two-box {
		position: relative;

		.boxList {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			top: -50rpx;
			// top: -;
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 6rpx;
			padding: 42rpx;

			.item_box {
				display: flex;
				align-items: center;
				flex-direction: column;

				.l1 {
					width: 80rpx;
					font-size: 26rpx;
					text-align: center;
					color: #BABABA;
				}

				.r1 {
					margin-top: 27rpx;
					color: #333333;
					display: flex;
					font-size: 26rpx;
					align-items: center;

					image {
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}

					.status {
						margin-left: 10rpx;
						width: 16rpx;
						height: 16rpx;
						font-size: 26rpx;
						border-radius: 50%;
						background: rgb(0, 255, 0);
					}

					.copy {
						font-size: 26rpx;
						color: #333333;
						border: 2rpx solid #fff;
						border-radius: 20rpx;
					}
				}

				.g {
					color: #333333;
				}
			}
		}
	}

	.content {
		padding: 30rpx;
		background: #EEEEEE;



		.equipment_top {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			margin-bottom: 30rpx;

			.equipment_b {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 45%;
				height: 88rpx;
				border-radius: 6rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #222222;
				background: rgb(219, 219, 219);
			}

			.active {
				background: #2a80f7;
				color: #FFFFFF;
			}
		}

		.line1_text {
			display: flex;

			.l {
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #48c52d;
				}
			}

			.r {
				margin-left: 20rpx;
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #ff6259;
				}
			}
		}

		.charts-box1 {
			background: #FFFFFF;
			margin-top: 30rpx;
			width: 100%;
			height: 600rpx;
			padding-right: 0;


			.noneLine {
				// position: absolute;
				// top: 0;
				// left: 0;
				// width: 100%;
				// height: 300rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: center;
				padding-top: 100rpx;
			}

			.t {
				// position: absolute;
				// top: 0;
				// right: 30rpx;
				color: #869fc7;
				font-size: 24upx;
			}

			.wlBox {
				width: 450rpx;
				// height: 500rpx;
				background: #FFFFFF;
				position: absolute;
				top: 50rpx;
				z-index: 100;
				right: 0;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
				padding: 30upx;
				font-size: 24upx;
				color: #232323;

				.text {
					margin-bottom: 15upx;
					white-space: nowrap;
				}
			}
		}

		.bottom_box {
			// 	margin-top: 0;
			// 	// border-top: 1px solid #e5e5e5;
			// 	padding-top: 0;
			display: flex;
			// 	justify-content: center;

			// 	view:nth-child(1) {
			// 		color: #e5e5e5;
			// 		font-size: 28rpx;
			// 	}

			// 	view:nth-child(2) {
			// 		margin-left: 60rpx;
			// 		color: #ff6259;
			// 		font-size: 28rpx;
			// 	}
		}

		.bo {
			margin-top: 30rpx;
			width: 100%;
			height: 20rpx;
			background: #f2f2f2;
		}

		.line_title {
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 20rpx;
		}

		.line2_text {
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;

			.l {
				color: #8d8d8d;
				font-size: 28rpx;

				text {
					color: #48c52d;
				}
			}

			.r {
				margin-left: 20rpx;
				color: #8d8d8d;
				font-size: 24rpx;

				text {
					color: #ff6259;
				}
			}
		}
	}

	.tools {
		position: fixed;
		bottom: 400rpx;
		right: 50rpx;
		width: 99rpx;
		height: 99rpx;
		background: rgba(76, 169, 254, 0.3);
		border-radius: 50%;
		opacity: 1;
		border: 0rpx solid;
		border-image: linear-gradient(180deg, rgba(83, 132, 253, 1), rgba(255, 255, 255, 1), rgba(93, 141, 254, 1)) 0 0;
	}

	::v-deep .u-cell__body {
		background: #FFFFFF;

	}

	::v-deep .u-cell__body:hover {
		background: #FFFFFF;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0;
	}
</style>